<template>
  <div class="container">
    <div style="padding:10px 0;">
      <div style="padding:15px;border:1px solid #eee;">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/matchmakerCard'}">红娘等级列表</el-breadcrumb-item>
          <el-breadcrumb-item>{{titleText}}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
    <div class="list-group">
        <el-row :gutter="20">
            <el-col :span="3">
                <div class="list-title"><span class="mast-icon" v-show="modelList.title.request">*</span>红娘等级名称:</div>
            </el-col>
            <el-col :span="9">
                <el-input v-model="modelList.title.value" placeholder="红娘等级名称"></el-input>
            </el-col>
        </el-row>
    </div>
    <div class="list-group">
        <el-row :gutter="20">
            <el-col :span="3">
                <div class="list-title"><span class="mast-icon" v-show="modelList.price.request">*</span>红娘基础价格:</div>
            </el-col>
            <el-col :span="9">
                <el-input v-model="modelList.price.value" type="number" placeholder="红娘基础价格"></el-input>
            </el-col>
        </el-row>
    </div>
    <div class="list-group">
        <el-row :gutter="20">
            <el-col :span="3">
                <div class="list-title"><span class="mast-icon" v-show="modelList.other_price.request">*</span>红娘成本价格:</div>
            </el-col>
            <el-col :span="9">
                <el-input v-model="modelList.other_price.value" type="number" placeholder="红娘成本价格"></el-input>
            </el-col>
        </el-row>
    </div>
    <div class="list-group">
        <el-row :gutter="20">
            <el-col :span="3">
                <div class="list-title"><span class="mast-icon" v-show="modelList.level.request">*</span>红娘等级:</div>
            </el-col>
            <el-col :span="9">
                <el-radio-group v-model="modelList.level.value">
                  <el-radio :label="1">红娘</el-radio>
                  <el-radio :label="2">服务中心</el-radio>
                  <el-radio :label="3">区域合伙人</el-radio>
                </el-radio-group>
            </el-col>
        </el-row>
    </div>
    <!-- <div class="list-group">
        <el-row :gutter="20">
            <el-col :span="3">
                <div class="list-title"><span class="mast-icon" v-show="modelList.commission.request">*</span>提成比列:</div>
            </el-col>
            <el-col :span="9">
                <el-input-number :min="0" v-model="modelList.commission.value" :precision="0"></el-input-number>
                <p style="padding:6px;font-size:12px;color:red;">(如：5%即输入5即可)</p>
            </el-col>
        </el-row>
    </div> -->
    <div class="list-group">
        <el-row :gutter="20">
            <el-col :span="3">
                <div class="list-title"><span class="mast-icon">*</span>红娘权益:</div>
            </el-col>
            <el-col :span="9">
              <p style="padding:10px;">
                <el-button type="primary" @click="interestsAdd">添加一条</el-button>
              </p>
              <p style="padding:10px;display: flex;align-items: center;" v-for="(item,index) in interestsList" :key="index">
                <el-input v-model="item.value" placeholder="红娘权益"></el-input>
                <el-popconfirm title="确定删除？" @confirm="interestsDel(index)">
                  <el-button slot="reference" type="danger" icon="el-icon-delete" circle size="mini"></el-button>
                </el-popconfirm>
              </p>
            </el-col>
        </el-row>
    </div>
    <div class="list-group">
        <el-row :gutter="20">
            <el-col :span="3">
                <div class="list-title"><span class="mast-icon" v-if="modelList.status.request">*</span>禁用/启用:</div>
            </el-col>
            <el-col :span="21">
                <el-switch
                    v-model="modelList.status.value"
                    active-text="禁用"
                    inactive-text="启用">
                </el-switch>
            </el-col>
        </el-row>
    </div>
    <div class="list-group">
        <el-row :gutter="20">
            <el-col :span="3">
                <div class="list-title"><span class="mast-icon" v-if="modelList.content.request">*</span>红娘详情:</div>
            </el-col>
            <el-col :span="19">
                <vue-editor :content="modelList.content.value" ref="myTextIntro"></vue-editor>
            </el-col>
        </el-row>
    </div>
    <div class="list-group"
         v-if="!judge"
         style="display:flex;flex-direction: row;justify-content: center;margin-top:40px;">
      <el-button size="medium" @click="cancel" style="margin-right:40px;">取 消</el-button>
      <el-button size="medium" type="primary" @click="preserve">确 定</el-button>
    </div>
  </div>
</template>

<script>
  import api from '@/api/index';
    import vueEditor from '@/components/views/commons/VueUeditorWrap';
  export default {
    name: 'positionAdd',
     components: {
        vueEditor
    },
    data: function () {
      return {
        mapseARCH:'',
        mapSearch:[],
        interestsList:[],
        showSearch:false,
        zzTypeist:[],
        tags:[],
        gridData:[],
        imgLoadPath: api.API_PATH + api.LOGIN_IMG,
        imgLoadPath: api.API_PATH + api.LOGIN_IMG,
        docLoadPath: api.IMG_PATH,
        pageName:'',
        createTime:'',
        ht_names:'',
        createPerson:'',
        modelList:{
          "title":{value:'',request:true,name:'红娘等级名称',placeholder:'请填写红娘等级名称',type:'input'},
          "price":{value:'',request:true,name:'红娘等级价格',placeholder:'请填写红娘等级价格',type:'input'},
          "other_price":{value:'',request:true,name:'红娘其他价格',placeholder:'请填写红娘等级其他价格',type:'input'},
          "level":{value:1,request:true,name:'等级',placeholder:'请选择等级',type:'input'},
          "is_examine":{value:1,request:true,name:'申请审核',placeholder:'请选择申请审核',type:'input'},
          "commission":{value:'',request:true,name:'红娘提成比列',placeholder:'请填写红娘提成比列',type:'input'},
          "content":{value:'',request:true,name:'红娘详情',placeholder:'请填写红娘详情',type:'input'},
          "interests":{value:'',request:true,name:'红娘权益',placeholder:'请填写红娘权益',type:'input'},
          "status":{value:false,request:false,name:'是否启用',placeholder:'请输入排序',type:'input'},
        },
        judge:false,
        titleText:'',
        id:'',
        type:'',
        title:'',
        roomLists:[],
        provinceList:[],
        companyList:[],
        followList:[],
        routerPath:'',
        name_zs:'',
        parentPage:0
      }
    },
    mounted () {
      this.id = this.$route.query.id;//付款记录id
      this.type = this.$route.query.type;//查看类型
      if (this.type == 1) {
        this.titleText = "新增";
      } else if (this.type == 2) {
        this.judge = false;
        this.titleText = "编辑";
        this.initAjaxDetail()
      } else if (this.type == 3) {
        this.initAjaxDetail();
        this.judge = true;
        this.titleText = "查看"
      }
    },
    methods: {
      interestsAdd(){
        this.interestsList.push({value:''})
      },
      interestsDel(index){
          this.interestsList.splice(index,1)
      },
      //保存
      preserve(){
        if(this.type == 1){
          this.addAjaxMethod()
        }else if(this.type == 2){
          this.editAjaxMethod()
        }

      },
      //取消
      cancel(){
        this.$router.push({path:'/memberCard'})
      },
      //详细信息api
      initAjaxDetail(){
        const loading = this.$loading({text: '加载中...'});
        this.$http.post(api.MEMBERCARD_DETAIL,{id:this.id})
                .then((res)=>{
                  console.log('res',res);
                  loading.close();
                  if(res.code == 1){
                    this.modelList.title.value=res.data.title;
                    this.modelList.price.value=res.data.price;
                    this.modelList.other_price.value=res.data.other_price;
                    this.modelList.level.value=res.data.level;
                    this.modelList.is_examine.value=res.data.is_examine;
                    this.modelList.commission.value=res.data.commission;
                    this.modelList.interests.value=res.data.interests;
                    this.modelList.content.value=res.data.content;
                    this.modelList.status.value=res.data.status==0?false:true;
                    let interests=[];
                    try{
                      interests=res.data.interests && Array.isArray(JSON.parse(res.data.interests))?JSON.parse(res.data.interests):[]
                    }catch(e){console.log(e)}
                    this.interestsList=interests;
                  }else{
                    this.$message.error(res.msg);
                  }
                })
                .catch((err)=>{
                  console.log('err',err)
                  this.$message.error(err.msg);
                })
      },
      //编辑
      editAjaxMethod(){
        //验证
        let test=this.testMethod();
        if(!test.flag){
          this.$message.error(test.msg);
          return false;
        }else{
          test.data.id=this.id;
        }
        console.log('test.data',test.data)
        const loading = this.$loading({text: '加载中...'});
        this.$http.post(api.MEMBERCARD_EDIT,test.data)
                .then((res)=>{
                  loading.close();
                  if(res.code == 1){
                    this.$message.success('编辑成功');
                    setTimeout(()=>{
                      this.$router.back()
                    },1000)
                  }else{
                    this.$message.error(res.msg);
                  }
                })
                .catch((err)=>{
                  this.$message.error(err.msg);
                })
      },
      //新增api
      addAjaxMethod(){
        //验证
        let test=this.testMethod();
        console.log('test.data',test.data)
        if(!test.flag){
          this.$message.error(test.msg);
          return false;
        }
        const loading = this.$loading({text: '加载中...'});
        this.$http.post(api.MEMBERCARD_ADD,test.data)
                .then((res)=>{
                  loading.close();
                  if(res.code == 1){
                    this.$message.success('添加成功');
                    setTimeout(()=>{
                      this.$router.back()
                    },1000)
                  }else{
                    this.$message.error(res.msg);
                  }
                })
                .catch((err)=>{
                  this.$message.error(err.msg);
                })
      },
      //验证方法
      testMethod(){
        let flag=true,msg='',data={};
        this.modelList.content.value=this.$refs['myTextIntro'].getContent();
        this.modelList.interests.value=JSON.stringify(this.interestsList);
        for(let i in this.modelList){
          if(this.modelList[i].request){
            if(!this.modelList[i].value || this.modelList[i].value == ''){
              flag=false;
              msg=this.modelList[i].placeholder;
              break;
            }
          }
        }
        if(flag){
          data={
            "title":this.modelList.title.value,
            "content":this.modelList.content.value,
            "level":this.modelList.level.value,
            "price":this.modelList.price.value,
            "other_price":this.modelList.other_price.value,
            "is_examine":this.modelList.is_examine.value,
            "commission":this.modelList.commission.value,
            "interests":this.modelList.interests.value,
            "status":this.modelList.status.value==true?1:0
          };
        }
        return {flag:flag,msg:msg,data:data}
      },
    }
  }
</script>


<style scoped>
  .list-title {
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    color: #333;
  }
  .list-group {
    padding: 10px 0;
  }
  h2 {
    padding: 10px;
    font-size: 16px;
    font-weight: bold;
    position: relative;
  }
  h2:after {
    content: '';
    display: inline-block;
    width: 3px;
    height: 15px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background: #409eff;
  }
  .map-group{
      position: relative;
  }
  .map-search{
      display: flex;
      align-items: center;
      position: absolute;
      top:10px;
      left:10px;
      padding:10px;
      width:400px;
      background: #fff;
      z-index: 300;
  }
  .map-search input{
      height: 40px;
      border:1px solid #eee;
      font-size:14px;
      color:#888;
      flex-grow: 1;
      outline: none;
  }
  .serarch-result{
      position: absolute;
      top:55px;
      left:0;
      right:0;
      box-shadow: 1px 1px 4px -3px #000;
      background-color:#fff;
      max-height: 300px;
  }
  .serarch-list{
      border-bottom:1px solid #eee;
  }
  .serarch-list:hover{
      cursor: pointer;
      background-color:#eee;
  }
  .serarch-rows{
      display: flex;
      padding:6px 10px;
      font-size:14px;
      color: #333;
      align-items: center;
  }
  .serarch-rows span:nth-child(1){
      margin-right:10px;
  }
</style>
